<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        处理状态
        <el-radio-group v-model="showStatus" style="margin-left: 10px" @change="search">
          <el-radio :label="2">新订单</el-radio>
          <el-radio :label="3">待配送</el-radio>
          <el-radio :label="4">配送中</el-radio>
          <el-radio :label="5">已送达</el-radio>
          <el-radio :label="6">拒 接</el-radio>
          <el-radio :label="7">用户取消</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <!--<div v-if="showStatus === 2">-->
      <!--<el-row>-->
        <!--<el-col :span="24" class="order-col">-->
          <!--本台设备正在手动接单-->
          <!--<span style="float:right;">去设置</span>-->
        <!--</el-col>-->
      <!--</el-row>-->
      <!--<el-row>-->
        <!--<el-col :span="24" class="order-col">-->
          <!--新订单已经被您处理完啦！在“已处理”里可以查看您的历史订单列表！-->
        <!--</el-col>-->
      <!--</el-row>-->
    <!--</div>-->
    <!--<div v-if="showStatus !== 2">-->
      <!--<el-row>-->
        <!--<el-col :span="24">-->
          <!--配送状态-->
          <!--<el-radio-group v-model="radio2" class="radio-group">-->
            <!--<el-radio :label="3">全部</el-radio>-->
            <!--<el-radio :label="6">待发起配送</el-radio>-->
            <!--<el-radio :label="9">商品已送达</el-radio>-->
            <!--<el-radio :label="9">配送已取消</el-radio>-->
          <!--</el-radio-group>-->
        <!--</el-col>-->
      <!--</el-row>-->
    <!--</div>-->
    <!--<div style="height: 10px;background-color: #f9f9f9;"></div>-->
    <el-row :gutter="30" style="margin-top: 20px;margin-right: 2px;">
      <el-col :span="16" >
        <el-container v-if="tableData.length === 0">
          <el-header>
            #1
          </el-header>
          <el-main>
            暂无数据
          </el-main>
        </el-container>
        <el-container v-for="item,index in tableData" :key="index">
          <el-header>
            #{{index + 1 + page.size * (page.number - 1)}} <span>立即送达</span>（建议在{{item.time}}之前送达）
            <!--<span style="float:right;">骑手已取餐</span>-->
          </el-header>
          <el-main class="order-main">
            <li>
              {{item.postalName}}   <span>&nbsp;&nbsp;&nbsp;&nbsp;{{item.postalPhone}}</span>
              <p>{{item.province}}{{item.city}}{{item.county}}{{item.address}}</p>
              <p>下单时间：{{item.saveTime}}</p>
              <p>订单号：{{item.orderCode}}</p>
              <p v-if="showStatus === 3 || showStatus === 4 || showStatus === 5">骑手：{{item.riderName}} <span>&nbsp;&nbsp;{{item.riderPhone}}</span></p>
              <div v-if="showStatus === 2">
                <el-button type="primary" size="mini" plain @click="orderReceive(item.id)">接 单</el-button>
                <el-button type="danger" size="mini" plain @click="rejectFunction(item.id)">拒 接</el-button>
              </div>
            </li>
            <li>
              商品信息
              <div class="show-btn">
                <el-button size="mini" plain @click="getOrderDetail(item.id)">查看 <i class="el-icon-arrow-up" v-if="!item.orderDetailFlag"></i><i class="el-icon-arrow-down" v-else></i></el-button>
              </div>
            </li>
            <div style="margin-top: 20px; height: auto;">
              <el-collapse-transition>
                <div v-if="item.orderDetailFlag">
                  <div v-for="item1,index1 in item.orderDetail.orderProducts" class="transition-box">
                    <span>{{item1.productName}}</span>
                    <span>×{{item1.quantity}}</span>
                    <span>原价{{item1.productPrice}}元</span>
                    <span>总价{{item1.totalPrice}}元</span>
                    <span>实际付款{{item1.realPrice}}元</span>
                  </div>
                  <div class="transition-box-money"><span>包装费：</span><span>￥{{item.packagePrice}}</span></div>
                  <div class="transition-box-money"><span>配送费：</span><span>￥{{item.postalPrice}}</span></div>
                  <div class="transition-box-money"><span>总 计：</span><span>￥{{item.totalPrice}}</span></div>
                  <div class="transition-box-money"><span>折扣优惠价格：</span><span>￥{{item.discountPrice}}</span></div>
                  <div class="transition-box-money"><span>实际付款：</span><span>￥{{item.realPrice}}</span></div>
                </div>
              </el-collapse-transition>
            </div>
          </el-main>
        </el-container>
        <!--分页-->
        <el-pagination
          :page-size="3"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="page.total">
        </el-pagination>
      </el-col>

      <el-col :span="8" style="background-color: #fdfdfd;padding: 0;">
        <el-row>
          <el-col :span="24" class="order-li">今日订单概况（全部门店）</el-col>
        </el-row>
        <el-row class="order-el-row">
          <el-col :span="24">已接订单：{{received_order}}笔</el-col>
        </el-row>
        <el-row class="order-el-row">
          <el-col :span="24">未接订单：{{not_received_order}}笔</el-col>
        </el-row>
        <el-row class="order-el-row">
          <el-col :span="24">今日营业总额：{{turnover}}元</el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="order-li">需关注订单（全部门店）</el-col>
        </el-row>
        <el-row class="order-el-row">
          <el-col :span="24">待配送订单：{{not_delivery_order}}笔
            <!--<span class="order-span">查看全部</span>-->
          </el-col>
        </el-row>
        <el-row class="order-el-row">
          <el-col :span="24">未处理退款：{{not_fund_order}}笔
            <!--<span class="order-span">查看全部</span>-->
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!---->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%">
      拒接理由：<el-input v-model="rejectReasonText" size="small" type="textarea" :rows="2"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="orderReject">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { order_page, order_detail, order_receive, order_reject, rider_all, order_number } from '@/api'

  export default {
    data() {
      return {
        dialogVisible: false,
        rejectReasonText: '',
        show3: false,
        loading: true,
        radio2: 1,
        showStatus: 2,
        page: {
          total: 0,
          number: 1,
          size: 3
        },
        tableData: [],
        orderDetail: [],
        rejectId: 0,
        riderList: [],
        received_order: 0,
        turnover: 0,
        not_received_order: 0,
        not_delivery_order: 0,
        not_fund_order: 0
      }
    },
    methods: {
      handleCurrentChange(val) {
        console.log(val)
        this.page.number = val
        this.getRider(this.page)
      },
      search() {
        this.getRider()
      },
      getInfo() {
        this.page._filter_eq_status = this.showStatus
        order_page(this.page).then(res => {
          console.log(res, 9)
          res.content.forEach(item => {
            if (item.wishTime) {
              const oo = item.wishTime.split('')
              const o = oo.splice(11, 5)
              // console.log(o, 1)
              const p = o.join('')
              // console.log(p, 2)
              item.time = p
            }
            item.orderDetailFlag = false
            this.riderList.forEach(item1 => {
              if (item.riderId === item1.id) {
                item.riderName = item1.name
                item.riderPhone = item1.phone
              }
            })
          })
          this.tableData = res.content
          this.page.total = res.totalElements
          this.loading = false
        })
      },
      getNum() {
        order_number().then(res => {
          console.log(res)
          this.not_fund_order = res[4].not_fund_order
          this.not_delivery_order = res[3].not_delivery_order
          this.not_received_order = res[2].not_received_order
          this.turnover = res[0].turnover
          this.received_order = res[1].received_order
        })
      },
      orderReceive(id) { // 接单
        const params = {
          id: id
        }
        this.$confirm(`确定要接单吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          order_receive(params).then(res => {
            console.log(res)
            this.$message({ type: 'success', message: '接单成功' })
            this.getRider()
          })
        }).catch(() => {
          console.log('cancel pass')
          // this.$message({ type: 'warning', message: '放弃操作' })
        })
      },
      rejectFunction(id) {
        this.rejectId = id
        this.dialogVisible = true
      },
      orderReject() { // 拒接
        if (!this.rejectReasonText) {
          this.$message({ type: 'warning', message: '请输入拒接理由' })
          return
        }
        const params = {
          id: this.rejectId,
          content: { rejectReason: this.rejectReasonText }
        }
        order_reject(params).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '拒接成功' })
          this.getRider()
          this.dialogVisible = false
        })
      },
      getOrderDetail(id) {
        const params = {
          id: id
        }
        order_detail(params).then(res => {
          console.log(res)
          this.tableData.forEach(item => {
            if (item.id === res.order.id) {
              item.orderDetail = res
              item.orderDetailFlag = !item.orderDetailFlag
            }
          })
        })
      },
      getRider() {
        rider_all().then(res => {
          console.log(res)
          this.riderList = res.brandRiderList
          this.getInfo()
        })
      }
    },
    watch: {
      '$store.state.message.messageNum': 'getRider'
    },
    mounted() {
      this.getRider()
      this.getNum()
    }
  }
</script>

<style src="./index.scss" lang="scss" scoped>

</style>
